<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/share/common.css" />
		<style>
			.navbar-shadow {
				width: 100%;
				display: block;
				position: relative;
			}
			
			.navInnerBar {
				display: block;
				width: 85%;
				height: 100%;
				margin: 0 auto;
				background-color: #C50000;
			}
			
			#navBar_fun {
				background-color: #FFF;
				width: 100%;
				height: 60px;
				border-bottom: 1px solid #ccc;
				font-size: 14px;
			}
			
			#navBar_fun .navBar_btn {
				float: left;
				width: 25%;
				height: 50px;
				color: #858585;
				top: 7px;
				text-align: center;
				position: relative;
			}
			
			#navBar_fun .active {
				color: #da4453;
			}
			
			#navBar_fun .navBar_btn img {
				vertical-align: middle;
				margin: 0px 2px 5px 0px;
				width: 20px;
			}
			
			#navBar_fun .navBar_bar {
				position: absolute;
				bottom: 0;
				left: 0%;
				height: 2px;
				width: 25%;
				-webkit-transition-transform: translateX(0%);
				transform: translateX(0%);
				-webkit-transition: transform .1s;
				transition: transform .1s;
			}
			
			#navBar_fun .navBar_bar .navBar_bar_inner {
				position: absolute;
				bottom: 0;
				left: 50%;
				height: 3px;
				width: 80%;
				background-color: #da4453;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
			}
			#info{
				position: absolute;
				top:0;
				right:32px;
				width:7px;
				height:7px;
				border-radius: 50%;
				background: red;
				display:none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left"></a>
			<a class="mui-icon mui-icon-chatbubble mui-pull-right header-right header-right-iocn" onclick="openFriendList()"></a>
			<h1 id="title" class="mui-title">圈子</h1>
		</header>
		<div class="mui-content">
			<div class="navbar-shadow">
				<div id="navBar_fun" class="navBar_fun">
					<div class="navBar_btn active" id="defaultTab" name="circleShop.html" tabindex="0">
						<p><img src="../../image/shopping/03.png" style="height:22px" /></p>购物 </div>
					<div class="navBar_btn" tabindex="1" name="circleTopic.html">
						<p><img src="../../image/shopping/01.png" /></p>话题 </div>
					<div class="navBar_btn" id="msg" tabindex="2" name="circleChatList.html">
						<p><img src="../../image/shopping/02.png" />
							<a id="info"></a>
						</p>聊天</div>
					<div class="navBar_btn" tabindex="3" name="circleServe.html">
						<p><img src="../../image/shopping/04.png" /></p>服务 </div>
					<div class="navBar_bar"> <span class="navInnerBar"></span> </div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/localData.js"></script>
	<script>
		mui.init();
		
		var subpage_style = {
			top: '105px',
			bottom: '0px',
			bounce: 'vertical'
		};
		var self;
		var move = mui(".navBar_bar")[0]; //移动对象
		var tabs = mui('.navBar_btn'); //点击对象
		//当前激活选项
		var activeTab = 1;
		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			if(self.source){
			   var defaultTab = document.getElementById("msg");
			   //activeTab = 2;
			}else{
			   var defaultTab = document.getElementById("defaultTab");
			}
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
		});
		
		//选项卡点击事件
		mui("#navBar_fun").on('tap', '.navBar_btn', function(e) {
				var viewid = vurl = this.getAttribute("name"); //获得当前点击窗口id
				var index = this.getAttribute("tabindex");
				var targetView = plus.webview.getWebviewById(viewid);
				for (var i = 0; i < tabs.length; i++) {
					tabs[i].classList.remove("active")
				}
				if (index == '2') {
					document.getElementById('info').style.display = 'none';
				} else {
					hasUreadmsg(readData(localStorage.noticeToken)); //未读消息提示
				}
				move.style.transform = "translateX(" + index * 100 + "%)";
				move.style.webkitTransform = "translateX(" + index * 100 + "%)";
				this.classList.add("active");
				if (targetView == activeTab) {
					return;
				}
				if (targetView) {
					var allwebview = self.opened();
					for (var i = 0; i < allwebview.length; i++) {
						allwebview[i].hide();
					}
					plus.webview.show(targetView, "fade-in", 150)
					activeTab = targetView;
				} else {
					creatView(vurl, viewid);
				}
			})
			//创建不同子webview
		function creatView(vurl, viewId) {
			var sub = plus.webview.create(vurl, viewId, {
				top: '105px',
				bottom: '0px',
				bounce: 'vertical'
			});
			self.append(sub);
			activeTab = sub;
		}
        
		function openFriendList() {
			mui.openWindow({
				url: '../chat/circleFriendList.html',
				id: 'circleFriendList.html',
				waiting: {
					autoShow: false
				}
			})
		}
        var db = openDatabase('messageChat', '1.0', 'messageChatOfHistory DB', 4 * 1024 * 1024);
		function hasUreadmsg(){
			var guideId = readData(localStorage.guideId);
			var phone = readData(localStorage.phone);
			db.transaction(function(tx) {
				tx.executeSql('SELECT * FROM CurentOtherMessage WHERE Phone=? AND GuideId=?', [ phone, guideId], function(tx, results) {
					var len = results.rows.length,
						i;
					if (len > 0) {
						document.getElementById('info').style.display = 'block';
					}
				}, null);
			});
		}
		/*mui.back = function() {
			child = self.children();
			for (var cd in child) {
				child[cd].close(0)
			}
			self.close(100)
		}*/
	</script>

</html>